<template>
    <div class="station-schedule-page">
        <van-nav-bar left-arrow :fixed="true" :title="'To: ' + endStationName" @click-left="$router.back(-1)">
        </van-nav-bar>
        <div style="padding: 23px;"></div>
        <div class="switch-btn">
            <div class="switch-txt">View past stations</div>
            <van-switch v-model="viewPastStations"
                        active-color="#2BB570"
                        inactive-color="#DDDDDD"
                        size="25px"
                        @change="changeViewStations"
            />
        </div>
        <div class="station-list-box">
            <div class="station-list-inbox">
                <div class="station-list-title">
                    <div class="train-time">Arrival</div>
                    <div class="train-time">Departure</div>
                    <div class="train-end">To</div>
                </div>
                <div class="station-list-items-box">
                    <div class="station-list-items" v-for="(item, index) in timesList" :key="index" :class="{'active': item.arrivalTime == arrivalTime && item.departureTime == departureTime }">
                        <div class="train-time">{{ getStationTime(item.arrivalTime) }}</div>
                        <div class="train-time">{{ getStationTime(item.departureTime) }}</div>
                        <div class="train-end">{{ getTranlateName(item, 'name') }}</div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</template>
<script>
    import {getTrainTimes} from '../../static/api/mgc_api'
    export default {
        name: 'StationSchedule',
        data() {
            return {
                endStationName: '',
                arrivalTime: '',
                departureTime: '',
                viewPastStations: true,
                timesList: [], // 等于trainTimeList 或者 allTrainTimeList -- Dom中用到此数据
                trainTimeList: [], // viewPastStations = true 时 用此data
                allTrainTimeList: [],// viewPastStations = false 时 用此data -- 全部的数据
            };
        },
        methods: {
            changeViewStations(e) {
                if (e) {
                    this.timesList = this.trainTimeList
                } else {
                    this.timesList = this.allTrainTimeList
                }
            },
            initStation(querys) {
                if (!querys) return false

                let  queryInfo= JSON.parse(querys)
                console.log(queryInfo)
                if(this.$store.state.store.localLang == 'MM'){
                    this.endStationName = queryInfo.endStationZy
                }else {
                    this.endStationName = queryInfo.endStationEn
                }
                this.arrivalTime = queryInfo.arrivalTime
                this.departureTime = queryInfo.departureTime
                this.getTrainTimesData(queryInfo.scheduleId)

            },
            getTrainTimesData(scheduleId){
                let searchForm = {};
                searchForm.scheduleId = scheduleId;
                getTrainTimes(searchForm).then((res) => {
                    if (res.data.data.errorID == 0) {
                        let  timeList = this.allTrainTimeList = res.data.data.object || []
                        for (let i=0; i<timeList.length; i++){
                            if (timeList[i].arrivalTime == this.arrivalTime && timeList[i].departureTime == this.departureTime){
                                this.trainTimeList = timeList.slice(i)
                            }
                        }
                        if (this.viewPastStations) {
                            this.timesList = this.trainTimeList
                        } else {
                            this.timesList = this.allTrainTimeList
                        }
                    }else {
                        this.$toast(res.data.data.message)
                    }
                }).catch((error) => {
                    console.log(error)
                    this.$toast('error,please try again later')
                })
            },
            getStationTime(timeStr) {
                if (!timeStr) return
                let _start = timeStr.substring(0, 5)
                let _end = timeStr.substring(8)

                return _start + _end
            },
            getTranlateName(item, name) {
                let nameStr = ''
                if (this.$store.state.store.localLang == 'MM') {
                    nameStr = item[name + 'Zy']
                } else {
                    nameStr = item[name + 'En']
                }
                return nameStr
            },

        },
        mounted() {
            if (this.$route.query.stationInfo) {
                this.initStation(this.$route.query.stationInfo);
            }
        }
    }

</script>
<style>
    .station-schedule-page .van-nav-bar{
        background-color: #f2f2f2;
        color: #333;
    }
    .station-schedule-page .van-nav-bar .van-icon{
        color: #c8c8c8;
        margin-right: 15px;
        font-size: 18px;
    }
    .station-schedule-page .van-list__loading{
        width: 100%;
        /*border-top: 1px solid #F2F2F2;*/
    }
    .station-schedule-page .van-nav-bar__title{
        min-width: 80%;
    }
</style>
<style scoped>
    .switch-btn{
        display: flex;
        justify-content: flex-end;
        align-items: center;
        padding: 8px 4%;
    }
    .switch-txt{
        margin-right: 15px;
    }
    .station-list-box{
        position: fixed;
        top: 83px;
        bottom: 0;
        left: 0;
        right: 0;
    }
    .station-list-inbox{
        position: relative;
        padding-top: 45px;
        height: 100%;
        overflow: hidden;

    }
    .station-list-title{
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        display: flex;
        font-size: 14px;
        line-height: 20px;
        padding: 12px 0;
        border-bottom: 1px solid #eee;
    }
    .train-time{
        width: 25%;
        padding-left: 8px;
    }
    .train-end{
        flex: 1;
        padding-left: 8px;
        padding-right: 10px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .station-list-items-box{
        height: 100%;
        overflow-y: scroll;
    }
    .station-list-items{
        display: flex;
        padding: 12px 0;
        border-bottom: 1px solid #eee;
    }
    .station-list-items.active{
        color: rgb(255, 153, 0);
    }
</style>
